<template>
    <div>
      <mbx lenev="用户管理" lenev1="商品管理" lenev2="商品列表"></mbx>
        
      <el-card class="box-card"  style="margin-top: 20px">
           <el-row :gutter="24">
        <el-col :span="12"
          ><div class="grid-content bg-purple-dark">
            <el-input
              placeholder="请输入内容"
              v-model="obj.query"
              class="input-with-select"
              clearable
              @input="spsou"
              @clear="spsou"
            >
              <el-button slot="append" icon="el-icon-search" @click="spsou"></el-button>
            </el-input></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple-dark">
            <el-button type="primary" 
              @click="$router.push('/addgood')">添加商品</el-button
            >
          </div></el-col
        >
      </el-row>
          <el-table
    :data="good"
    border
    stripe
    style="width: 100%;margin-top: 20px">
     <el-table-column
      type="index"
      label="#"
     >
    </el-table-column>
    <el-table-column
      prop="goods_name"
      label="商品名称"
      width="600"
      >
    </el-table-column>
    <el-table-column
      width="110"
      prop="goods_price"
      label="商品价格(元)"
      >
    </el-table-column>
    <el-table-column
      width="110"
      prop="goods_weight"
      label="商品重量">
    </el-table-column>、
      <el-table-column
      prop="add_time"
      label="创建时间">
        <template slot-scope="scope">
           <div>
              {{scope.row.add_time|time}}
           </div>
       </template>
    </el-table-column>
      <el-table-column
      label="操作">
       <template slot-scope="scope">
           <div>
              <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" @click="Shan(scope.row.goods_id)"></el-button>
           </div>
       </template>
    </el-table-column>
  </el-table>
    <el-pagination
    style="margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="obj.pagenum"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="obj.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</el-card>
    </div>
</template>

<script>
import _ from "lodash"
export default {
    data() {
        return{
           good:[],
           obj:{
               query:'',
               pagenum:1,
               pagesize:5
           },
           total:0
        };
    },
    created() {
      this.getlist()
    },
    methods: {
    spsou:_.debounce(function(){
       this.getlist()
    },300),
    async Shan(id){
        console.log(id)
          const res=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        if(res==='confirm'){
             await this.$API.Spshan(id)
           this.getlist()
        }
      
    },
    async getlist(){
        const res=await this.$API.Goodlist(this.obj)
        this.good=res.goods
        this.total=res.total
        console.log(res)
    },
    handleSizeChange(val) {
        this.obj.pagesize=val
        this.getlist()
      },
      handleCurrentChange(val) {
        this.obj.pagenum=val
        this.getlist()
      }
    },
    watch:{

cart: {

handler(newValue) {

},
deep: true,

immediate:true,
},
    },
};
</script>

<style scoped lang='scss'>

</style>
